<template>
  <div class="app-container">
    <!--操作区-->
    <el-row class="search-collapse">
      <el-col :span="24">
        <el-button type="primary">新增</el-button>
      </el-col>
    </el-row>

    <!--数据显示区-->
    <el-row class="select-table table-striped">
      <el-col :span="24">
        <el-table
          :data="responseVO.data"
          style="width: 100%;margin-bottom: 20px;"
          border
          default-expand-all>

          <el-table-column prop="nickName" label="用户昵称"></el-table-column>
          <el-table-column prop="deptName" label="部门名称"></el-table-column>
          <el-table-column label="性别">
            <template slot-scope = "scope">
              <span v-if="scope.row.sex === 0" >男</span>
              <span v-else-if="1" >女</span>
              <span v-else >未知</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话" ></el-table-column>
          <el-table-column prop="email" label="邮件" ></el-table-column>
          <el-table-column prop="avatar" label="头像" ></el-table-column>
          <el-table-column prop="" label="状态" >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" effect="dark">启用</el-tag>
              <el-tag type="danger" v-else effect="dark">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="loginDate" label="最后登录日期" sortable></el-table-column>
          <el-table-column label="操作">
            <template slot-scope = "scope"><el-button type="text" class="el-icon-edit">编辑</el-button></template>
          </el-table-column>
        </el-table>
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchFrom.pageNumber"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="searchFrom.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="responseVO.total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import userService from '@/service/userService'
  //vue规范
export default{
  //初始化数据
  data() {
    return {
      searchFrom:{
        pageNumber:1,
        pageSize:5
      },
      //分页数据对象
      responseVO:{
        total:0,
        data:[]
      }
    }
  },
  //vue管理的方法
  methods: {
    handleSizeChange(val) {
      this.searchFrom.pageSize = val
      userService.loadData()
    },
    handleCurrentChange(val) {
      this.searchFrom.pageNumber = val
      userService.loadData()
    }
  },
  //初始化调用方法
  created() {
    userService.init(this)
    userService.loadData()
  }
}
</script>
